<!-- BigImg -->
  <template>
  <div :class="['big-img',{'load-fail': bigImgDialog.loadImgFail} ]" :style="[{ backgroundImage : 'url(' + bigImgDialog.imgUrl + ')'}, { backgroundSize: bigImgDialog.loadImgFail ? '70% auto' : 'cover'}, imgStyle ]"
       @click="handleBigImg()">
    <img ref="originImg" :src="bigImgDialog.imgUrl" style="display: none;">
    <span class="load-img-fail-word" v-if="bigImgDialog.loadImgFail">加载失败</span>
    <el-dialog class="big-img-dialog" :show-close="bigImgDialog.showClose" :width="bigImgDialog.width" :visible.sync="bigImgDialog.show"
               append-to-body>
      <img :style="bigImgDialog.styles" :src="bigImgDialog.imgUrl" alt>
    </el-dialog>
  </div>
</template>

<script>
import ImgLoadFail from '../../assets/images/imgLoadFail.png'
export default {
  name: 'bigImg',
  data () {
    return {
      bigImgDialog: {
        showClose: false,
        width: '50%',
        show: false,
        styles: {},
        loadImgFail: false,
        imgUrl: ''
      }
    }
  },
  props: {
    width: {
      type: String,
      default: () => ''
    },
    imgUrl: {
      type: String,
      default: () => ''
    },
    imgStyle: {
      type: Object,
      default: () => { }
    },
    ImgStyles: {
      type: Object,
      default: () => { }
    }
  },
  mounted () {
    this.isImgLoadFail()
  },
  methods: {
    handleBigImg () {
      if (this.bigImgDialog.loadImgFail) return
      const imgs = this.$refs.originImg
      // 图片原始高度
      const naturalHeight = imgs.naturalHeight.toString()
      // 图片原始宽度
      const naturalWidth = imgs.naturalWidth.toString()
      // 浏览器可视高度
      const clientHeight = document.body.clientHeight
      // 浏览器可视宽度
      const clientWidth = document.body.clientWidth

      this.bigImgDialog.show = true

      // 初始dialog 宽度
      let dialogWdith = clientWidth - 200

      // 判断图片原始宽度 小于 浏览器可视宽度 - 200
      if (parseFloat(naturalWidth) < (clientWidth - 200)) {
        dialogWdith = naturalWidth
      } else {
        dialogWdith = clientWidth - 200
      }

      // 设置dialog 宽度
      this.bigImgDialog.width = this.width || dialogWdith.toString() + 'px'

      this.bigImgDialog.styles = this.ImgStyles || {
        width: '100%',
        height: naturalHeight + 'px',
        maxWidth: (clientWidth - 200).toString() + 'px',
        maxHeight: (clientHeight - 200).toString() + 'px'
      }
    },
    isImgLoadFail () {
      let img = new Image()
      img.src = this.imgUrl
      img.onerror = () => { // 图片加载错误时的替换图片
        this.bigImgDialog.loadImgFail = true
        this.bigImgDialog.imgUrl = ImgLoadFail
      }
      img.onload = () => { // 图片加载成功后把地址给原来的img
        this.bigImgDialog.loadImgFail = false
        this.bigImgDialog.imgUrl = this.imgUrl
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.big-img {
  width: 100%;
  min-height: 60px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.big-img .origin-img {
  display: block;
}
.big-img-dialog .el-dialog {
  max-width: 1100px;
}
.big-img-dialog .el-dialog .el-dialog__body {
  padding: 10px 10px 4px 10px;
  overflow: hidden;
  box-sizing: border-box;
}

.big-img-dialog .el-dialog__header {
  padding: 0;
}
.load-img-fail-word {
  position: absolute;
  bottom: 0;
  font-size: 12px;
  text-align: left;
  width: 100%;
  line-height: 20px;
  height: 20px;
}
.load-fail{
  background-size: 80% 75% !important;
}
</style>
